<template>
  <div class="flex">
    <vue-header title="意见反馈"></vue-header>
    <div class="flex-grow">
      <group title="问题和意见">
        <x-textarea :max="200" v-model="content" :autosize="true"
          placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助"
        ></x-textarea>
      </group>

      <div class="submitBtn" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import { Group, XTextarea } from 'vux'
export default {
  components: {
    Group, XTextarea
  },

  data (){
    return {
      content: ''
    }
  },

  methods: {
    submit (){
      if(this.content.length < 10){
        this.$alert.toast('反馈内容不能少于10个字')
        return 
      }

      this.$alert.loading.show('提交中')
      setTimeout(() =>{
        this.$alert.loading.hide()
        this.$alert.alert('提交成功，感谢您的反馈')
        this.$router.back()
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.submitBtn{
  .theme-btn;
  width: 60%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 8px;
  margin: 30px auto 0 auto;
}
</style>